<script setup>
import {toRefs} from "vue";
import {useStore} from "vuex";

const props = defineProps({
  name: {type: String},
  width: {type: String || Number},
  destroyOnClose: {type: Boolean},
})
// 弹窗名称
const {name} = toRefs(props)

const store = useStore();

const emit = defineEmits(['open'])

const {data, show} = store.state.Dialog
</script>

<template>
  <div>
    <el-dialog v-model="show[name]" :destroy-on-close="destroyOnClose" :show-close="false" :width="width || '70%'" append-to-body @open="$emit('open',data[name])">
      <template #header>
        <slot :data="data[name]" name="header"/>
      </template>
      <template #footer>
        <slot :data="data[name]" name="footer"/>
      </template>
      <div :class="store.getters['Config/getBackgroundClass']">
        <slot :data="data[name]"/>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
</style>